Calvosaez me preguntaba como añadir una imagen de fondo a la sidebar.
He recordado una entrada de Rosa donde explica como añadir una ´´sidebar colorida`` basándose en las explicaciones de Blogger Hacked
Rosa le añade algún extra a la CSS para personalizar la sidebar, ya su vez voy a darle un retoque para intentar así esclarecer un poco las dudas de Calvosaez.
En un principio le añadiremos color a la sidebar con el truco original de Blogger Hacked.

Sidebar con fondo de color


Nos debemos situar en Plantilla/HTML vamos a añadir justo encima de ]]></b:skin> lo siguiente:

.even {
background-color: #EEEEEE;
}

.odd {
background-color: #AAAAAA;
}

Luego justo antes del </head> de la plantilla añadimos este código:

<script src='http://bloggerhacked.googlepages.com/prototype.js' type='text/javascript'></script>
<script src='http://bloggerhacked.googlepages.com/evenodd.js' type='text/javascript'></script>

El resultado sería algo así:






Sidebar con bordes

Si deseamos añadir un borde o redondear las esquinas Rosa nos propone añadir lo siguiente:

.even {
background-color: #EEEEEE;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}
.odd {
background-color: #AAAAAA;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: solid #000000 1px;
}

El resultado sería el siguiente:






Ahora vamos a dar solución a Calvosaez con la idea de añadir una imagen de fondo.

Imagen de fondo en la sidebar

Nos situaremos en el primer código añadido osea en:

.even {
background-color: #EEEEEE;
}
.odd {
background-color: #AAAAAA;
}

Y agregaremos background:url('aquí la url de la imagen'); en lugar de background-color: #AAAAAA; y background-color: #EEEEEE; de manera que quedaría asi:

.even {
background:url('aquí la url de la imagen');

}
.odd {
background:url('aquí la url de la imagen');

}

El resultado sería más o menos este:





Recordad que la opción de añadir color hará que cada nuevo elemento añadido en la sidebar aparezca envuelto en un cuadro donde podéis alternar colores escogidos previamente.


!Suerte¡
Anónimo

Gracias Gema te devo una, ya te contare como me queda, creo que voy a tener poco tiempo estos dos meses que entran pero lo dejo grabado para practicarlo, saludos

Responder
Gem@

Que tu ausencia sea para bien ;)

Responder
La Blogueria

Hola Gema, ante todo gracias, yo hago un blog de ayuda para los usuarios de mi cibercafé... que la necesitan bastante... jajaja, en este caso yo también, así que agradacerte tu ayuda y sobre todo tu amabilidad. ¡Sigue así!

Responder
Gem@

Saludos y bienvenido shit happens me alegra que te sea de utilidad lo que encuentras aquí.
Otro día déjame la url de tu blog me gustará verlo ;)

Responder
Anónimo

Hola Gema, ¡gracias por no llamarme shit! he de recordar cambiarme el nick jajaja... precisamente ahora estoy añadiendo una linea a la sidebar según tus explicaciones, la verdad que por más inútil que soy, gracias a ti sólo puede salirme bien... mi nombre es vanessa y el blog que hago para el ciber se llama clavedesolcibercafe, alojado en blogspot... acabo de añadir tambien un montón de libros para descargar (irá creciendo la lista) así que sois bienvenidos a visitarlo (no flipéis con las entradas, explico conceptos hiperbásicos porque es lo que la mayoria necesita cuando llega al ciber). Gracias y ¡allá voy a por la líea de la sidebar! Un saludo enorme a todos en quienes pervive ese espléndido espiritu de cooperación.

Responder
Gem@

Gracias Vanessa es un gran trabajo el que estás realizando.
Si me necesitas ya sabes donde encontrarme ;)

Responder
HC.0000111

Hola gema, buen blog..

mira el truco no me funciona, pero creo que ya encontre el problrma.

Al intentar acceder directamente alos scripts en googlepages me sale que la banda ancha se a exedido,, podrias mandarelos a mi mail, por favor,

hc.0000111@gmail.com

Responder
Gem@

Pues ahora mismo están funcionando HC.0000111 :D

Responder
Alexis Moya

Gema, gracias por tu blog... Nos hace a muchos las cosas mas faciles... Tengo un problema, no quiero la sidebar con un fondo, solo quiero el borde ¿que hago?

Responder
Gem@

Klgo. Alexis Moya R. menudo nombrecito eh :)

Si deseas un borde en la sidebar puedes ver como hacerlo aquí, si es una sola línea aquí, si el borde es redondeado aquí.
La imaginación cuenta mucho a la hora de personalizar el blog, me sorprende gratamente ver como de una pequeña explicación añaden algo nuevo.
¿Me avisas que vea el resultado? ;)

Responder
Admin

Hola gem@ mira quiero ponerle una imagen a la sidebar, pero el script ese ya no funciona, ha extralimitado el limite de banda, donde puedo conseguirlo?
Para alojarlo en mi servidor tengo que encontrarlo primero, sino como hago??
Tambien quiero poner una imagen de fondo en el main, pero todavía no se como hacerlo, si me das una mano te agradecería, es para un blog nuevo que estoy haciendo, las imagenes ya las tengo pero no se como ponerlas ni donde, la plantilla es la minima como la tuya.
Besooootes! ;)

Responder
Gem@

Es cierto k_nelita y desde que he leído tu comentario no he parado de darle vueltas pero según el autor ya no está en funcionamiento por sobrepasar la banda ancha de Google Pages.
Ahora bien, si lo que deseas es añadir una imagen a la sidebar puedes hacerlo añadiendo unas líneas a la CSS mira esta entrada y compruébalo ;)

En el main es más o menos lo mismo sólo que en vez de añadir las líneas de código en #sidebar-wrapper hay que hacerlo en #main-wrapper {

Este cambio en #main-wrapper { hará que la imagen ocupe todo el largo del main, si deseas que ocupe solamente el espacio de las entradas debes añadir las líneas de código en .post {

El cambio es increíble para el poco trabajo que representa, ve mirando en vista previa y verás los resultados.

Quiero ver la obra de arte eh ;)

Responder
Admin

Ahora me pongo a esto, pero ve mirando mi otra obra que recién terminé, los emoticones en una imagen junto con los html y todo lo demás, juaaa, es un poco grande la imagen pero así la gente se entera de lo que puede utilizar, al menos si son tan burros como yo,:D que nunca se como se hacen los emoticones, creo que lo expuse muy claramente.
Besotes gem@ gracias por todo, me voy a seguir trabajando con lo que me has dicho a ver que sale ;)

Responder
Gem@

Quedan estupendos :)

Responder
Emiliano Ibañez

La verdad qué tu blog es fantástico, te felicito, de corazón.

Te digo, necesito saber como haces para poner en la parte del sidebar que dice " Traductor, Blogroll " etc; poniendo una imagen..


Si podés averiguar, avisame...

Te mando un saludo.

Responder
Gem@

Hola Emiliano bienvenido.
Para personalizar los títulos de la sidebar hay varias opciones una de ella la de la imagen y puedes verlo como primer ejemplo en esta entrada.
Si te asaltan dudas házmelo saber ;)

Responder
Anónimo

Acabo de ver esta entrada y me parece muy buena, pero la falla que le veo al código es que sólo funciona con Firefox, Safari y Google Chrome. ¿No tendrás alguno que sirva para el resto de los navegadores?

Responder
Gem@

Puma de Sangre Azul las redondeces en Explorer no son nada sencillas, sin embargo hay una entrada de J.MIur que te puede interesar.
(Mira aquí)

Responder
El Software "STAFF"

Hola! me gusta tu blog =D es buena la explicación solo q tengo una duda... lo q pasa esq yo kiero ponerle un dondo a mis widgets... el mismo a todos pero dond lo ago keda cortado, no llega asta el final d cada widget o si no le falta xq el alto es menos q la imagen q pongo...

quisiera q me dijeras como acerle para q la imagen ocupe todo el alto de los wigets... sin repetirc, q se stire o contraiga segun sea necesario, x asi decirlo

espero puedas respondrme xq stube tratando pero no pude u.u si no me ntiends pasa a mi blog y ve como me keda... http://aradeus-geornio.blogspot.com/

d antemano gracias!!!

Responder
Gem@

Necros Giovanni hasta donde yo sé eso no puede hacerse con una sola imagen, es difícil que una imagen vaya extendiéndose.
Si añadimos una image tipo textura o degradado no sería problema porque se repite y se muestra siempre igual, de no ser así es necesario tres imágenes una para el encabezado, otra para el cuerpo y la última para añadirla al final del gadget ;)

Responder
El Software "STAFF"

muchas gracias x aclararmelo ^^ bueno, en ese caso solo kizierda q me dijeras como poner una imagen al final de el gadget (si se puede q kede para todos la misma mejor) te lo agradeseria mucho xq no encontre tampoco ningun titorial para eso

GRACIAS d nuevo x todo y x responder tan rapido

Responder
Gem@

Pero depende de la imagen Necros mira por ejemplo este blog de k_nelita http://folktan.blogspot.com/

Esa imagen está añadida en la css, la parte de .sidebar .widget
.sidebar .widget{
background: #FFFFFF url(aquí-url-de-la-imagen) no-repeat left top;
margin:0 0 0.7em;
padding:10px;
}
Todo depende de la imagen, si es una textura simplemente se añade
background: #000 url(aquí-url-de-la-imagen);

Responder
3705

Hola! gracias por tu post, me sirvió mucho... ahora resta un solo inconveniente, necesito que el texto del título comience unos milimetros despues que la imagen de fondo de los widgets; podrías ayudarme con eso? Un saludo, Gracias!

Responder
Gem@

3705 Necesito ver tu blog para eso ;)

Responder
3705

Ok, esta es la dirección: http://postabanana.blogspot.com/
Un saludo y muchas gracias!

Responder
Admin

hola gema, ya aplique este efecto en mi blog y accidentalmente me quedo perfecto con la imagen de fondo de los titulos de cada widget.
Ahora me interesaria aplicar exactamente lo mismo pero en cada post.
Yo fui probando varias posibilidades sin lograr nada, ya que yo quiero que abarque el titulo, las etiquetas, el contenido y los comentarios
( 0 comentarios ).
El blog al que me refiero es http://pablorizia.blogspot.com, desde ya muchas gracias

Responder
Gem@

yz Que abarque todo es muy dificil P4BLQ porque se trata de una imagen, y esa parte que dices se divide en tres. Título, contenido de la entrada y pos-footer.
Si añades la imagen en cualquiera de ellos no cubrirá todo el contenido se vería cortada :(

Responder
Admin

y agregarle color en ves de una imagen pero aplicadno este efecto seria lo mismo?

Responder
Gem@

yz El efecto de esquinas redondeadas y darle color si puede aplicarse.
Mira esta entrada:
http://gemablog-.blogspot.com/2008/08/dividir-secciones-con-css.html
Para que cubriera todo el post (Título, contenido y pos-fotter) sería añadir en los estilos del
post lo siguiente:

.post {
aquí estarían tus estilos..
aquí estarían tus estilos..
aquí estarían tus estilos..
background:#000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

Responder
Gem@

yz Me olvidaba decirte que el efecto esquinas redondeadas de esa forma solo se visualiza en Firefox, con Explorer las esquinas se visualizan líneas rectas :(

Responder
Pilar

Gracias por la ayuda que ofreces.
Tengo qe acabar de diseñar el blog. Lo hago poco a poco y disfruto de los resultados.
Dejo este mensaje para que sepas que has ayudadoa una más.
Saludos!!!
Si quieres, puees echar unvistazo.

Responder
Pilar

Gracias por la ayuda que ofreces.
Tengo qe acabar de diseñar el blog. Lo hago poco a poco y disfruto de los resultados.
Dejo este mensaje para que sepas que has ayudadoa una más.
Saludos!!!
Si quieres, puees echar unvistazo.

Responder
Gem@

yz Me alegra mucho Pilar :)
(falta porquito para tu santo)
¡¡ F e l i c i d a d e s !!

Responder
Emilia Inés

no entiendo bien el codigo de imagen de fondo de sidebar. me darías un ejemplo?

Responder
Gem@

yz Eclipsada mejor mira esta entrada, está creado con CSS y no es necesario script.
Lee donde dice "Si en lugar de añadir color queremos añadir una imagen de fondo bastará con sustituir background:#cc9999; por background:url('url-de-tu-imagen');"

Responder
Anónimo

hola gem@, quería saber si es posible rellenar los espacios de relleno del formulario con color en http://wanttobuymywork.blogspot.com.
thankiu

Responder
Gem@

:: Es algo que desconozco lk :(

Responder
Anónimo

vale. no pasa nada. así igual queda "mono".

Responder
Anónimo

hola gem@, me gustaría añadir color solo a un widget de la sidebar. sé que es posible porque ya lo hice, pero ahora mismo no recuerdo cómo... el santo se me va al cielo todos los días un ratito... ayzzz

Responder
Gem@

:: Mira esta entrada:
http://gemablog-.blogspot.com/2009/05/anadir-estilos-un-gadget.html ;)

Responder
AleKa

Eres la mejor, llevo 2 horas ya hasta que no te encontré no dí con ello! Gracias de verdad!

Responder
Gem@

:: Hola K, me alegra que resultara bien :)

Responder
lomaja

Muy buenas Gemma, voy a guardarme el link de esta pagina, porque estoy empezando a aprender Html y la verdad es que ya he venido a este blog varias veces.
En fin, quisiera hacerte varias preguntas:

Primera es que en mi blog http://laincreiblevulnerabilidaddelser.blogspot.com/ el fondo central se queda a mitad del sidebar, con lo que al cambiar el color de fondo no lo consigo con la otra parte del sidebar.

Segundo es que he utilizado el codigo que has puesto aqui, y me ha funcionado la primera vez, pero a partir de ahi, cuando vuelvo a cargar la pagina ya no aparece.

Y tercera y ultima, ayer estuve buscando un "Show last comments" widget en español, porque el que tengo, que es de blogger, esta en ingles y queda un poco desafinado. Y he visto que el tuyo esta muy bien. He mirado en el codigo fuente de tu pagina pero no he conseguido sacar nada, si me dices donde lo puedo conseguir... Ya te agregaria en favoritos y todo.

Muchas gracias por la ayuda ya prestada.
Un saludo

Responder
Gem@

:: Saludos lomaja el problema de la imagen no consigo localizarlo ni con Firefox ni Explorer, a lo mejor lo has solucionado ya y llego tarde.
Sobre personalizar la sidebar para darle color sigue mejos en siguiente %% enlace no te dará problemas.

Lo que entiendo como Show last comments son los últimos comentarios, o comentarios recientes, eso puedes verlo en este otro %% enlace tal y como yo lo tengo añadido :)

Responder
NN

Hola Gema, quería hacerte una consulta...he puesto tres widgets a modo de botÓn, enlazados cada uno con una pagina estática...(creo que es eso)pero la imagen del boton se me queda demasiado a la derecha, es decir, no queda centrada con respecto a los demás widgets que vienen debajo...y no se como arreglarlo...
si me pudieras dar alguna idea...
muchas gracias!!

Responder
Gem@

:: Hola Nona, si quedan centrados lo que ocurre que los botones tiene un fondo de color que forma parte de la imagen por eso quedan centrados.
Mira la imagen: http://lh3.ggpht.com/_ujJR5M74kL8/S_2YM0IWNTI/AAAAAAAACWo/E6cb87K4X4A/botoncontacto260.gif

Responder
Kaede Shio

Muy interesante. Justamente me estaba preguntado si era posible ponerle fondo a la sidebar, pero ahora tengo una pregunta ¿mas o menos de cuanto aconsejas que sea la imagnen= a mi me gustaria hacer un fondo con bordes, pero se me hace que si lo hago con bordes, no se ajustaria a la medida del alto de la sidebar, y en el futuro, cuando quisiera ñadir mas elemento en la sidebar, el fondo no le quedaria tan bien :(

Responder
Gem@

:: Kaede eso que deseas hacer no lo he probado pero tiene solución, se crean tres imágenes, una para la parte superior, otra central (que es la que visualmente va alargando conforma añadimos gadgets) y una tercera imagen que se añade en la parte inferior.

Si no recuerdo mal fue Oloman de el que hizo una entrada tipo tutorial http://oloblogger.blogspot.com/

Responder
Kaede Shio

Ya veo. Intente hacer lo que explica esta entrada, y todo me hubiera salido fantastico, si no hubiera sido porque tengo un singinbox en la barra lateral (una lista de reproducciones), y cuando puse todos los codigos, me di conque no dejaba que presiones lo botosnes :(, pero bueno, ya vere que otra cosa intento :D.

PS: gracias por intentarme ayudar con el link

Responder
Gem@

:: Seguro que Oloman sabe explicarte mejor que yo porque hico un tutorial muy completo con imágenes :)

Responder
emma evans

he de decir que esto es una gran mierda no me ha ayudado absolutamente en nada ni explica claramente lo que hay que hacer

Gem@

Es curioso, pero te has parado a pensar que esta mierda le ha funcionado a otros con la misma explicación??

Responder
Unknown

Hola, perodn por las molestia, consulta en style para poder agregar bottom img como puedo hacer?
Intente de todo :'(. Gracias Saludos.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top